<template>
  <div class="user-wrapper">
    <div class="btns-content">
      <router-link class="btn" to="/user/profile">
        个人资料
      </router-link>
      <router-link class="btn" to="/user/mycourse">
        我的课程
      </router-link>
      <router-link v-if="userInfo && userInfo.role==='1'" class="btn" to="/user/work">
        我的作业
      </router-link>
      <router-link v-if="userInfo && userInfo.role==='2'" class="btn" to="/user/work">
        全部作业
      </router-link>
      <router-link v-if="userInfo && userInfo.role==='1'" class="btn" to="/coding">
        开始编程
      </router-link>
      <router-link v-if="userInfo && userInfo.role==='2'" class="btn" to="/user/creatework">
        布置作业
      </router-link>
    </div>
    <div class="user-view">
      <router-view></router-view>
    </div>
  </div>
</template>
<script>
export default {
  name: 'UserFrame',
  computed: {
    userInfo () {
      return this.$store.state.userInfo
    }
  }
}
</script>

<style lang="less">
.btns-content {
  display: flex;
  width: 70%;
  margin: 0 auto;
  justify-content: space-between;
  padding-top: 80px;
  @media screen and (max-width: 768px){
    width: 96%;
    padding-top: 20px;
  }
  .btn {
    display: flex;
    padding: 5px 0;
    width: 20%;
    height: 40px;
    color: #000;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border: 1px solid #bbb;
  }
  .btn + .btn {
    margin-left: 5%;
  }
  .btn.router-link-active {
    background: #0195dd;
    color: #fff;
  }
}
</style>
